
import React, { Component } from 'react';
import { Modal, Toast, ActivityIndicator, Button } from 'antd-mobile'
import { getBindDevice, unBindDevice, getopenid,saveDeviceInfo } from '../utils'

/**
 * 设备解绑界面
 */
const alert = Modal.alert
class UnbindDevice extends Component {

    constructor(props, context) {
        super(props, context);
        this.state = {
            deviceSn: '',
            isUnbinding: false,
            disabled:true,
        }
    }
    componentWillMount() {
        getBindDevice((result) => {
            if (result.errcode === 0) {
                if (!result.data || result.data.device_sn === '') {
                    this.props.history.replace({
                        pathname: '/not_bind',
                    });
                } else {
                    this.setState({
                        deviceSn: result.data.device_sn,
                        disabled:false
                    });
                }
            }else {
                Toast.show('获取设备信息失败',1,false);
            }

        });
    }

    componentDidMount() {
		document.title = localStorage.getItem('device_name');
	}

    handleUnbind = () => {
        const deviceName = localStorage.getItem('device_name');
        this.dialog = alert('解除绑定',
            "您确定要解绑" + deviceName + " ?",
            [
                { text: '取消' },
                { text: '解绑', onPress: () => this.unbind() },
            ]
        );
    }

    unbind() {
        this.setState({
            isUnbinding: true
        });
        unBindDevice(this.state.deviceSn, getopenid(), (data) => {
            this.setState({
                isUnbinding: false
            });
            if (data.errcode === 0) {
                Toast.show('解绑成功', 2, false);
                saveDeviceInfo(null);
                setTimeout(() => {
                    window.wx.closeWindow();
                }, 2000);
            } else {
                Toast.show('解绑失败', 2, false);
            }
        });
    }

    componentWillUnmount() {
        if (this.dialog) {
            this.dialog.close();
        }
        Toast.hide();
    }

    render() {
        let sn = '';
        if (this.state.deviceSn !== '') {
            let arr = this.state.deviceSn.split('_');
            sn = arr[arr.length-1];
        }

        return (
            <div style={{ width: '100%', height: '100%', position: 'absolute' }}>
            
                <div style={{ width: '100%', height: '100%', zIndex: 2, position: 'absolute', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>

                    <div style={{ width: '100%', height: '120px', textAlign: 'center', alignItems: 'center', justifyContent: 'center' }}>
                        <div >
                            <p style={{fontSize:'18px'}}>设备序列号: <span style={{ color: '#15a67c',fontSize:'15px' }}>{sn}</span></p>
                        </div>
                        <div style={{ width: '100%', height: '120px', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                            <Button
                                type="ghost"
                                disabled={this.state.disabled}
                                style={{ width: '80%' }}
                                onClick={this.handleUnbind}>点击解绑设备</Button>
                        </div>

                    </div>

                </div>

                {
                    this.state.isUnbinding &&
                    <ActivityIndicator
                        toast
                        text="解绑中..."
                        animating={this.state.isUnbinding} />
                }
            </div>
        );
    }
}

export default UnbindDevice;